<template>
  <!-- Checkout -->
  <div class="checkout-view">
    <div class="checkout-nav">
      <div class="logo" @click="$router.push('/')" style="cursor: pointer">{{ "Magento" }}</div>
      <div class="hanbag-box" @click="drawer = true">
        <el-badge :value="0" :max="99" class="item">
          <i class="iconfont icon-handbag-o"></i>
        </el-badge>
      </div>
    </div>
    <heading-title title="Checkout" />
    <div class="checkout-container">
      <el-row :gutter="25">
        <el-col :sm="16" :xs="24">
          <div class="left-nav-item">
            <div
              class="nav-items"
              :class="navCurrent === index ? 'active' : ''"
              v-for="(item, index) in navList"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <components :is="is_name" @click="childClick"> </components>
        </el-col>
        <el-col :sm="8" :xs="0">
          <div class="right-container">
            <p class="right-title">
              {{ "ORDER SUMMARY" }}
            </p>
            <div class="order-summary" v-show="is_name === 'Pay'">
              <div>
                <span>Cart Subtotal</span>
                <span>$757.00</span>
              </div>
              <div>
                <div>
                  <p>Shipping</p>
                  <span>Flat Rate - Fixed</span>
                </div>
                <span>$45.00</span>
              </div>
              <div>
                <span>Order Total</span>
                <span>$802.00</span>
              </div>
            </div>
            <p class="items-in-cart" @click="isCode = !isCode">
              {{ productItems.length + " Items in Cart" }}
              <i
                :class="isCode ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </p>
            <div class="right-items-box" v-show="isCode">
              <div
                v-for="(item, index) in productItems"
                :key="index"
                class="shopping-cart-item"
              >
                <el-image
                  style="width: 80px; height: 80px"
                  :src="item.src"
                ></el-image>
                <div class="cart-info">
                  <p>{{ item.name }}</p>
                  <p>{{ "SELECT SIZE：44" }}</p>
                  <p>{{ "Qty：" + item.qty }}</p>
                </div>
              </div>
            </div>
            <div class="ship-box border-box" v-show="is_name === 'Pay'">
              <div class="title">
                <span>Ship To:</span>
                <span class="edit" @click="editClick">edit</span>
              </div>
              <div class="info">
                <p>
                  <span>nakey</span>
                  <span>xixi</span>
                </p>
                <p>
                  <span>sdgf</span>
                  <span>sdfs</span>
                  <span>sdfsdf</span>
                </p>
                <p>
                  <span>sdgf</span>
                  <span>sdfs</span>
                  <span>sdfsdf</span>
                </p>
                <p>jkdfghkjh</p>
                <p>jkdfghdfgkjh</p>
              </div>
            </div>
            <div class="ship-methods border-box" v-show="is_name === 'Pay'">
              <div class="title">
                <span>Shipping Method:</span>
                <span class="edit" @click="editClick">edit</span>
              </div>
              <p>Flat Rate - Fixed</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- hanbag -->
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      custom-class="product-drawer"
    >
      <div class="right-container">
        <p class="right-title">
          {{ "ORDER SUMMARY" }}
        </p>
        <div class="order-summary" v-show="is_name === 'Pay'">
          <div>
            <span>Cart Subtotal</span>
            <span>$757.00</span>
          </div>
          <div>
            <div>
              <p>Shipping</p>
              <span>Flat Rate - Fixed</span>
            </div>
            <span>$45.00</span>
          </div>
          <div>
            <span>Order Total</span>
            <span>$802.00</span>
          </div>
        </div>
        <p class="items-in-cart" @click="isCode = !isCode">
          {{ productItems.length + " Items in Cart" }}
          <i :class="isCode ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
        </p>
        <div class="right-items-box" v-show="isCode">
          <div
            v-for="(item, index) in productItems"
            :key="index"
            class="shopping-cart-item"
          >
            <el-image
              style="width: 80px; height: 80px"
              :src="item.src"
            ></el-image>
            <div class="cart-info">
              <p>{{ item.name }}</p>
              <p>{{ "SELECT SIZE：44" }}</p>
              <p>{{ "Qty：" + item.qty }}</p>
            </div>
          </div>
        </div>
        <div class="ship-box border-box" v-show="is_name === 'Pay'">
          <div class="title">
            <span>Ship To:</span>
            <span class="edit" @click="editClick">edit</span>
          </div>
          <div class="info">
            <p>
              <span>nakey</span>
              <span>xixi</span>
            </p>
            <p>
              <span>sdgf</span>
              <span>sdfs</span>
              <span>sdfsdf</span>
            </p>
            <p>
              <span>sdgf</span>
              <span>sdfs</span>
              <span>sdfsdf</span>
            </p>
            <p>jkdfghkjh</p>
            <p>jkdfghdfgkjh</p>
          </div>
        </div>
        <div class="ship-methods border-box" v-show="is_name === 'Pay'">
          <div class="title">
            <span>Shipping Method:</span>
            <span class="edit" @click="editClick">edit</span>
          </div>
          <p>Flat Rate - Fixed</p>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  props: [""],
  data() {
    return {
      productItems: [],
      isCode: false,
      navList: ["1.shipping", "2.Review & Payments"],
      navCurrent: 0,
      is_name: "Address",
      drawer: false
    };
  },

  components: {
    HeadingTitle: () => import("_c/HeadingTitle"),
    Address: () => import("./components/address"),
    Pay: () => import("./components/pay")
  },

  computed: {
    ...mapGetters(["productList", "addressInformation"])
  },

  beforeMount() {},

  mounted() {
    this.productItems = this.productList;
  },

  methods: {
    childClick(val) {
      this.navCurrent = val;
      this.is_name = "Pay";
    },
		editClick() {
			this.is_name = "Address";
			this.navCurrent = 0;
			// console.log(1)
		}
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.checkout-view {
  font-size: 14px;
  p {
    margin: 0;
  }
  .checkout-nav {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    position: fixed;
    justify-content: space-between;
    background: #fff;
		z-index: 12;

    .logo {
      font-size: 24px;
      font-weight: 600;
    }
  }

  .checkout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;

    .left-nav-item {
      display: flex;
      & > div.nav-items {
        margin-right: 20px;
        font-size: 16px;
        color: #969696;

        &.active {
          color: #000;
          border-bottom: 2px solid #000;
        }
      }
    }
  }

  .hanbag-box {
    @media (min-width: 768px) {
      display: none;
    }
    @media (max-width: 767px) {
      display: block;
    }
  }

  .right-container {
		padding: 0 20px;
    p.right-title {
      font-weight: 700;
      margin-bottom: 20px;
    }

    p.items-in-cart {
      cursor: pointer;
      margin-bottom: 25px;
    }

    .shopping-cart-item {
      display: flex;
      height: 80px;
      align-items: center;
      font-family: "Red Hat Display", sans-serif;
      color: #333;
      font-size: 12px;
      // padding-bottom: 30px;
      margin-bottom: 20px;
      // border-bottom: 1px solid #d1d1d1;
      p {
        margin: 0;
      }

      .cart-info {
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;
      }
    }

    .order-summary {
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 32px;
      & > div {
        height: 50px;
        align-items: center;
        display: flex;
        justify-content: space-between;

        &:nth-child(2) {
          & > div {
            color: #999;
            & > p {
              font-size: 13px;
              color: #969696;
              font-weight: 700;
            }
          }
        }

        &:last-child {
          margin-bottom: 32px;

          & > span {
            font-weight: 500;
          }
        }
      }
    }

    .info {
      font-size: 14px;
      p {
        margin-bottom: 10px;
      }
    }
  }

  .border-box {
    margin: 0 0 20px;
    .title {
      padding-top: 32px;
      margin-bottom: 16px;
      border-top: 1px solid #e2e2e2;
      font-size: 22px;
      font-weight: 500;

      & > span:last-child {
        font-size: 14px;
        text-decoration: underline;
				cursor: pointer;
      }
    }
  }
}
</style>
